<template>
	<div class="recommend">
		<h3>推荐歌单</h3>
        <div class="recommend_list">
            <div class="item" v-for="(item,index) of recommendList" :key="index">
                <img :src="item.picUrl" alt="">
                <p>{{item.name}}</p>
            </div>
        </div>
	</div>
</template>
   
<script>
export default {
	data() {
		return {
            recommendList:[]
		}
	},
	mounted() {
		this.$axios.get('/music/personalized', {       // 还可以直接把参数拼接在url后边
			params: {
				limit:6
			}
		}).then((res) => {
			console.log(res)
			this.recommendList = res.data.result;
		}).catch((error) => {
			console.log(error);
		});
	},
}
</script>
   
<style scoped>
.recommend {
    background: #fff;
    margin-top: 20px;
}
.recommend h3{
    font-size: .34rem;
    margin-bottom: 20px;
    border-left: .04rem solid #d33a31;
    text-indent: 10px;
}
.recommend_list{
    font-size: .26rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.item{
    width: 2.46rem;
    margin-bottom: .08rem;
}
.item img{
    width: 2.46rem;
    height: 2.46rem;
}
</style>